<template>
  <div>
    <wx-tables
      :columns="columns"
      title="家长入校"
      :data-source="dataSource"
      :loading="loading"
      :total="total"
      :page.sync="page"
    >
      <template #search>
        <!--        <tip-block tip="搜索" />-->
        <el-form label-position="left" style="margin-top: 10px;">
          <div style="display: flex;">
            <el-form-item style="display: flex;" label="所在学部" prop="search_code">
              <el-select v-model="searchForm.year_department_id" clearable placeholder="请选择学部">
                <el-option
                  v-for="item in select_dept"
                  :key="item.type"
                  :label="item.label"
                  :value="item.type"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="display: flex;margin-left: 2%;" label="所在年级" prop="search_code">
              <el-select v-model="searchForm.grade_name" clearable placeholder="请选择年级">
                <el-option
                  v-for="item of 20"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="display: flex;margin-left: 2%;" label="所在班级" prop="search_code">
              <el-select v-model="searchForm.class_name" clearable placeholder="请选择班级">
                <el-option
                  v-for="item of 20"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <div style="margin-left: 5%;">
              <el-button type="primary" class="table-btn" icon="el-icon-search" @click="handleSearchClick">筛选</el-button>
              <el-button class="table-btn" icon="el-icon-refresh" @click="handleRectSearch">重置</el-button>
            </div>
          </div>
        </el-form>
      </template>
      <!-- tools -->
      <template v-slot:actual_enter_school_time="record">
        {{ record.row.actual_enter_school_time || '暂未入校' }}
      </template>
      <template v-slot:parentName="record">
        {{ record.row.parentName || record.row.tel_num}}
      </template>
      <template v-slot:out_enter_status="record">
        {{ PARENT_STATUS_LIST[record.row.out_enter_status] }}
      </template>
      <template v-slot:out_school_time="record">
        {{ record.row.out_school_time || '尚未出校' }}
      </template>
      <!-- table slots -->
      <template v-slot:oper="record">
        <div class="oper-box">
          <span><el-link type="primary" @click="handleOpenChangeInfo(record.row)">查看</el-link></span>
        </div>
      </template>
    </wx-tables>

    <wx-full title="编辑" :visible.sync="formVisible">
      <template v-slot:tools>
        <!--        <el-link v-if="isAdd" type="primary" :disabled="formBtnDisabled" @click="handleSaveDraft">保存草稿</el-link>-->
        <!--        <el-link v-else type="primary" :disabled="formBtnDisabled" @click="handleSaveMyForm">保存</el-link>-->
      </template>
      <student-detail ref="myForm" :loading="formLoading" :is-add="isAdd" :form-info="studentFormInfo" @close="close" />
    </wx-full>
  </div>
</template>

<script>
import WxFull from '@/components/WxFull'
import WxTables from '@/components/WxTables'
import FullMixins from '@/components/WxTables/fullMixins'
import TableMixins from '@/components/WxTables/mixins'
import StudentDetail from './Form'
import { LEAVE_STATUS, PARENT_STATUS_LIST, SELECT_STATUS } from '@/views/constants'
export default {
  name: 'Chschool',
  components: {
    WxTables,
    WxFull,
    StudentDetail
  },
  mixins: [TableMixins, FullMixins],
  data() {
    return {
      studentFormInfo: {},
      LEAVE_STATUS,
      SELECT_STATUS,
      changeRole: false,
      formVisible: false,
      PARENT_STATUS_LIST,
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'parentName', label: '家长姓名' ,slots: true},
        { dataIndex: 'tel_num', label: '联系电话' },
        { dataIndex: 'studentName', label: '学生' },
        { dataIndex: 'teacherName', label: '班主任' },
        { dataIndex: 'enter_school_time', label: '申请入校时间' },
        { dataIndex: 'actual_enter_school_time', label: '进校时间', slots: true },
        { dataIndex: 'out_school_time', label: '出校时间', slots: true },
        { dataIndex: 'out_enter_status', label: '状态', slots: true },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      markId: 'id',
      // 查询表格API
      api: 'api/adminPortal/parentOutEnterSchool/getListByCon?school_id=1&level=user,student,teacher',
      select_grade: [],
      select_dept: []
    }
  },
  watch: {
    dataSource() {
      this.dataSource.forEach((item) => {
        item.parentName = item.user.real_name
        if (item.student) {
          item.studentName = item.student.name
        }
        item.teacherName = item.teacher.name
      })
    }
  },
  mounted() {
    this.handleGetYearDepartment()
  },
  methods: {
    handleOpenChangeInfo(data) {
      this.studentFormInfo = data
      this.formVisible = true
    },
    close() {
      this.formVisible = false
    }
  }
}
</script>
